<script setup>
  import { ref } from 'vue'
  import { onLoad, onShow } from '@dcloudio/uni-app'
  import { http } from '@/utils/http.js'
  import { parseTime } from '@/utils/index.js'

  // 获取战令用户信息
  const userInfo = ref({
    war_status: 1,
  })
  const uppercent = ref(0)
  const daysShort = ref(0)
  const maxGrade = ref()
  const userGrade = ref(0)
  async function getWarUser() {
    const res = await http.request({
      url: '/api/war/warUser',
      method: 'POST',
      data: {},
    })
    userInfo.value = res.data
    maxGrade.value = res.max_grade
    uppercent.value =
      (Number(res.data.war_experience) / Number(res.data.sum_experience_jdt)) *
      100
    if (uppercent.value >= 100) {
      uppercent.value = 100
    }
    const currentTimestamp = Math.floor(Date.now() / 1000)
    daysShort.value = res.data.war_end - currentTimestamp
    userGrade.value = res.data.war_grade
  }

  //等级列表
  const currentPage = ref(1)
  const pageSize = ref(10)
  const total = ref(0)
  const rewardList = ref([])
  async function getLevelList() {
    const res = await http.request({
      url: '/api/war/getGradeList',
      method: 'POST',
      data: {
        page: currentPage.value,
        limit: pageSize.value,
      },
    })
    total.value = res.count

    if (res.data.length == 0) {
      --currentPage.value
    }
    rewardList.value = [...rewardList.value, ...res.data]
    if (rewardList.value[total.value - 1]) {
      rewardList.value.pop()
    }
  }

  function listLower() {
    ++currentPage.value
    getLevelList()
  }
  // 返回上一页
  function goBack() {
    uni.navigateBack({ delta: 1 })
  }

  const takepopup = ref()
  // 当前选择领取
  const currentTake = ref([])
  const currentId = ref(0)
  function takeReward(info, id) {
    if (info.length) {
      currentTake.value = [...info]
      currentTake.value.shift()
    } else {
      currentTake.value = [info]
    }
    currentId.value = id
    takepopup.value.open('center')
  }

  async function takeAll() {
    console.log(currentTake.value)
    const res = await http.request({
      url: '/api/war/lqPost',
      method: 'POST',
      data: {
        id: currentId.value,
        type: currentTake.value[0].type,
      },
    })
    if (res.st == 1) {
      uni.utils.toast('领取成功')
      currentTake.value.forEach((item) => {
        item.is_lq = 1
      })
      takepopup.value.close()
    } else {
      // uni.utils.toast(res.msg)
      console.log(res.msg)
    }
  }

  async function takeAllSum() {
    let arr = []
    rewardList.value.forEach((item) => {
      if (userInfo.value.war_type == 1) {
        if (item.win_info[0].is_lq == 2) {
          arr.push({
            grade_id: item.id,
            type: 1,
          })
        }
      } else {
        if (item.win_info[0].is_lq == 2) {
          arr.push({
            grade_id: item.id,
            type: 1,
          })
        }
        if (item.win_info[1].is_lq == 2) {
          arr.push({
            grade_id: item.id,
            type: 2,
          })
        }
      }
    })
    if (maxGrade.value.win_info[0].is_lq == 2) {
      arr.push({
        grade_id: maxGrade.value.id,
        type: 1,
      })
    }
    if (maxGrade.value.win_info[2].is_lq == 2) {
      arr.push({
        grade_id: maxGrade.value.id,
        type: 2,
      })
    }
    console.log(arr)
    const res = await http.request({
      url: '/api/war/allLq',
      method: 'POST',
      data: {
        idArr: arr,
      },
    })
    if (res.st == 1) {
      uni.utils.toast('领取成功')
      rewardList.value = []
      getWarUser()
      getLevelList()
    } else {
      uni.utils.toast('领取失败')
    }
  }
  // 获取设备信息
  const shebei = ref(process.env.VUE_APP_PLATFORM)

  onShow(() => {
    getWarUser()
    getLevelList()
  })
</script>

<template>
  <view class="war-content">
    <view class="content-top">
      <video
        v-if="shebei == 'mp-weixin'"
        style="position: absolute; top: 0; left: 0; width: 100%; height: 100%"
        id="myVideo"
        src="https://ojqn.wm2177.com/wechat_imgs/war/background.mp4"
        autoplay="true"
        :controls="false"
        :enable-progress-gesture="false"
        :enable-play-gesture="false"
        :vslide-gesture="false"
        :vslide-gesture-in-fullscreen="false"
        :loop="true"
        :show-progress="false"
        :webkit-playsinline="true"
        :x-webkit-airplay="true"
      ></video>

      <view class="war-top">
        <view class="war-back" @click="goBack">
          <view class="back-aim"> </view>
        </view>
      </view>
      <view class="war-above">
        <view class="above-top">
          <view class="name">
            <view class="batch" v-if="userInfo.war_status == 1">
              第{{ userInfo.batch }}期
            </view>
          </view>
          <view class="above-time" v-if="userInfo.war_status == 1">
            <view class=""> 剩余时间： </view>

            <uni-countdown
              color="#FFFFFF"
              :show-second="false"
              :day="Math.floor(daysShort / (24 * 60 * 60))"
              :hour="Math.floor((daysShort % (60 * 60 * 24)) / (60 * 60))"
              :minute="Math.floor((daysShort % (60 * 60)) / 60)"
              :show-colon="false"
            />
            <!-- {{
							`${Math.floor(
								daysShort / (24 * 60 * 60)
							)}天${Math.floor(
								(daysShort % (60 * 60 * 24)) / (60 * 60)
							)}小时${Math.floor(
								(daysShort % (60 * 60)) / 60
							)}分钟`
						}} -->
          </view>
          <view class="rule"> 规则 </view>
        </view>
        <view class="above-bottom" v-if="userInfo.war_status == 1">
          <view class="above-bottom-bottom"> </view>
          <view class="level-num">
            <view
              class=""
              style="margin-top: 10rpx; font-size: 62rpx; line-height: 62rpx"
            >
              {{ userInfo.war_grade }}
            </view>
            <view class="" style="font-size: 24rpx; line-height: 24rpx">
              LEVEL
            </view>
          </view>
          <view class="level-bar">
            <view class="" style="font-size: 28rpx; color: #da5ffe">
              升级需消费星石：{{
                `${
                  userInfo.war_experience > userInfo.sum_experience_jdt
                    ? userInfo.sum_experience_jdt
                    : userInfo.war_experience
                }/${userInfo.sum_experience_jdt}`
              }}
            </view>
            <view class="" style="margin-top: 13rpx">
              <view class="bottom-bar">
                <view class="top-bar" :style="{ width: uppercent + '%' }">
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view class="war-down" v-if="userInfo.war_status == 1">
      <view class="war-down-top">
        <view class="category">
          <view class=""> 支援物资 </view>
          <view class="" style="font-size: 16rpx"> SUPPORT MATERIALS </view>
        </view>
        <view
          class=""
          style="margin-left: 20rpx; margin-right: 20rpx; font-size: 26rpx"
        >
          抽赏金额累计{{ userInfo.special_money }}可免费解锁特殊奖励
        </view>
        <view class="take-all" @click="takeAllSum"> </view>
      </view>
      <view class="leve-reward">
        <view class="level-normal">
          <view class="" style="width: 50%"> 等级 </view>
          <view class="" style="width: 50%"> 普通奖励 </view>
        </view>
        <view class="special">
          <view class="special-lock" v-if="userInfo.war_type == 1"> </view>
          <view class=""> 特殊奖励 </view>
        </view>
      </view>
      <scroll-view
        scroll-y="true"
        class="scroll-Y"
        style="height: 48vh"
        @scrolltolower="listLower"
      >
        <view
          class="level-reward-item"
          v-for="(item, index) in rewardList"
          :key="'relist' + item.id"
        >
          <view class="level-reward-normal">
            <view class="level-reward-normal-level">
              <view class="level-reward-normal-level-left">
                <view
                  class="level-css"
                  :style="[
                    {
                      backgroundImage: `url(
												${
                          item.grade <= userGrade
                            ? 'https://ojqn.wm2177.com/wechat_imgs/war/square.png'
                            : 'https://ojqn.wm2177.com/wechat_imgs/war/dark-square.png'
                        }
											)`,
                    },
                  ]"
                >
                  {{ item.grade }}
                  <view
                    class="bar-top"
                    v-if="index != 0"
                    :style="[
                      {
                        backgroundColor:
                          item.grade <= userGrade ? '#DA5FFE' : '#5A4F95',
                      },
                    ]"
                  ></view>
                  <view
                    class="bar-bottom"
                    :style="[
                      {
                        backgroundColor:
                          item.grade <= userGrade ? '#DA5FFE' : '#5A4F95',
                      },
                    ]"
                  ></view>
                </view>
              </view>
              <view class="level-reward-normal-level-right">
                <view class="normal-reward-img">
                  <view class="cant" v-if="item.win_info[0].is_lq == 0"> </view>
                  <view
                    class=""
                    v-if="item.win_info[0].is_lq == 2"
                    @click="takeReward(item.win_info[0], item.id)"
                  >
                    <view class="can-out"></view>
                    <view class="can-in"></view>
                  </view>
                  <view
                    class="allready-take"
                    v-if="item.win_info[0].is_lq == 1"
                  >
                  </view>
                  <image
                    v-if="item.win_info[0].win_type == 1"
                    style="width: 100%; height: 100%; background-color: #522fa9"
                    src="../../static/point.png"
                    mode=""
                  ></image>
                  <image
                    v-if="item.win_info[0].win_type == 2"
                    style="width: 100%; height: 100%; background-color: #522fa9"
                    src="../../static/coupon.png"
                    mode=""
                  ></image>
                  <image
                    v-if="item.win_info[0].win_type == 3"
                    style="width: 100%; height: 100%; background-color: #522fa9"
                    :src="item.win_info[0].goods_info.img"
                    mode=""
                  ></image>
                  <image
                    v-if="item.win_info[0].win_type == 4"
                    style="width: 100%; height: 100%; background-color: #522fa9"
                    src="../../static/diamond.png"
                    mode=""
                  ></image>
                  <view
                    class="normal-reward-num"
                    v-if="
                      item.win_info[0].win_type == 1 ||
                      item.win_info[0].win_type == 4
                    "
                  >
                    {{ item.win_info[0].data }}
                  </view>
                </view>
              </view>
            </view>
          </view>
          <view class="level-reward-special">
            <scroll-view
              class="scroll-view_H"
              scroll-x="true"
              style="width: 240rpx; height: 106rpx"
            >
              <view class="" style="height: 106rpx; display: flex">
                <view
                  class="normal-reward-img-item"
                  v-for="(reward, index) in item.win_info"
                  :key="'special' + index"
                  v-show="reward.id != item.win_info[0].id"
                >
                  <view
                    class="normal-lock"
                    style="z-index: 2"
                    v-if="userInfo.war_type == 1"
                  ></view>

                  <view
                    class="cant"
                    style="
                      width: 100%;
                      height: 100%;
                      position: absolute;
                      top: 0;
                      left: 0;
                      z-index: 1;
                    "
                    v-if="reward.is_lq == 0"
                  ></view>
                  <view
                    class=""
                    v-if="reward.is_lq == 2"
                    @click="takeReward(item.win_info, item.id)"
                  >
                    <view class="can-out"></view>
                    <view class="can-in"></view>
                  </view>
                  <view class="allready-take" v-if="reward.is_lq == 1"> </view>
                  <image
                    v-if="reward.win_type == 1"
                    style="width: 100%; height: 100%; background-color: #522fa9"
                    src="../../static/point.png"
                    mode=""
                  ></image>
                  <image
                    v-if="reward.win_type == 2"
                    style="width: 100%; height: 100%; background-color: #522fa9"
                    src="../../static/coupon.png"
                    mode=""
                  ></image>
                  <image
                    v-if="reward.win_type == 3"
                    style="width: 100%; height: 100%; background-color: #522fa9"
                    :src="reward.goods_info.img"
                    mode=""
                  ></image>
                  <image
                    v-if="reward.win_type == 4"
                    style="width: 100%; height: 100%; background-color: #522fa9"
                    src="../../static/diamond.png"
                    mode=""
                  ></image>
                  <view
                    class="normal-reward-num"
                    v-if="reward.win_type == 1 || reward.win_type == 4"
                  >
                    {{ reward.data }}
                  </view>
                </view>
              </view>
            </scroll-view>
          </view>
        </view>
      </scroll-view>
    </view>
    <!-- 没有战令 -->
    <view
      class=""
      style="height: 61vh; overflow: hidden; position: relative"
      v-else
    >
      <view
        class=""
        style="
          height: 158rpx;
          background-color: #240e3c;
          border-bottom: 2rpx solid rgba(255, 255, 255, 0.2);
        "
      >
      </view>
      <view
        class=""
        style="
          height: 158rpx;
          background-color: #240e3c;
          border-bottom: 2rpx solid rgba(255, 255, 255, 0.2);
        "
      >
      </view>
      <view
        class=""
        style="
          height: 158rpx;
          background-color: #240e3c;
          border-bottom: 2rpx solid rgba(255, 255, 255, 0.2);
        "
      >
      </view>
      <view
        class=""
        style="
          height: 158rpx;
          background-color: #240e3c;
          border-bottom: 2rpx solid rgba(255, 255, 255, 0.2);
        "
      >
      </view>
      <view
        class=""
        style="
          height: 158rpx;
          background-color: #240e3c;
          border-bottom: 2rpx solid rgba(255, 255, 255, 0.2);
        "
      >
      </view>
      <view
        class=""
        style="
          height: 158rpx;
          background-color: #240e3c;
          border-bottom: 2rpx solid rgba(255, 255, 255, 0.2);
        "
      >
      </view>
      <view
        class=""
        style="
          height: 158rpx;
          background-color: #240e3c;
          border-bottom: 2rpx solid rgba(255, 255, 255, 0.2);
        "
      >
      </view>
      <view
        class=""
        style="
          height: 100%;
          width: 100%;
          position: absolute;
          top: 0;
          left: 0;
          background-color: transparent;
          text-align: center;
          line-height: 49vh;
        "
      >
        本期暂无战令，敬请期待
      </view>
    </view>
    <view class="bottom-level" v-if="userInfo.war_status == 1">
      <view class="level-reward-item">
        <view class="level-reward-normal">
          <view class="level-reward-normal-level">
            <view class="level-reward-normal-level-left">
              <view
                class="level-css"
                :style="[
                  {
                    backgroundImage: `url(
												${(maxGrade.win_info[0].grade = userGrade
                          ? 'https://ojqn.wm2177.com/wechat_imgs/war/square.png'
                          : 'https://ojqn.wm2177.com/wechat_imgs/war/dark-square.png')}
											)`,
                  },
                ]"
                >{{ maxGrade.grade }}</view
              >
            </view>
            <view class="level-reward-normal-level-right">
              <view class="normal-reward-img">
                <view
                  class="cant"
                  v-if="maxGrade.win_info[0].is_lq == 0"
                ></view>
                <view
                  class=""
                  v-if="maxGrade.win_info[0].is_lq == 2"
                  @click="takeReward(maxGrade.win_info[0], maxGrade.id)"
                >
                  <view class="can-out"></view>
                  <view class="can-in"></view>
                </view>
                <view
                  class="allready-take"
                  v-if="maxGrade.win_info[0].is_lq == 1"
                >
                </view>
                <image
                  v-if="maxGrade.win_info[0].win_type == 1"
                  style="width: 100%; height: 100%; background-color: #522fa9"
                  src="../../static/point.png"
                  mode=""
                ></image>
                <image
                  v-if="maxGrade.win_info[0].win_type == 2"
                  style="width: 100%; height: 100%; background-color: #522fa9"
                  src="../../static/coupon.png"
                  mode=""
                ></image>
                <image
                  v-if="maxGrade.win_info[0].win_type == 3"
                  style="width: 100%; height: 100%; background-color: #522fa9"
                  :src="maxGrade.win_info[0].goods_info.img"
                  mode=""
                ></image>
                <image
                  v-if="maxGrade.win_info[0].win_type == 4"
                  style="width: 100%; height: 100%; background-color: #522fa9"
                  src="../../static/diamond.png"
                  mode=""
                ></image>
                <view
                  class="normal-reward-num"
                  v-if="
                    maxGrade.win_info[0].win_type == 1 ||
                    maxGrade.win_info[0].win_type == 4
                  "
                >
                  {{ maxGrade.win_info[0].data }}
                </view>
              </view>
            </view>
          </view>
        </view>
        <view class="level-reward-special">
          <scroll-view
            class="scroll-view_H"
            scroll-x="true"
            style="width: 240rpx; height: 106rpx"
          >
            <view class="" style="height: 106rpx; display: flex">
              <view
                class="normal-reward-img-item"
                v-for="(item, index) in maxGrade.win_info"
                :key="'bottom' + index"
                v-show="item.id != maxGrade.win_info[0].id"
              >
                <view
                  class="normal-lock"
                  style="z-index: 2"
                  v-if="userInfo.war_type == 1"
                ></view>
                <view
                  class="cant"
                  style="
                    width: 100%;
                    height: 100%;
                    position: absolute;
                    top: 0;
                    left: 0;
                    z-index: 1;
                  "
                  v-if="item.is_lq == 0"
                ></view>
                <view
                  class=""
                  v-if="item.is_lq == 2"
                  @click="takeReward(maxGrade.win_info, maxGrade.id)"
                >
                  <view class="can-out"></view>
                  <view class="can-in"></view>
                </view>
                <view class="allready-take" v-if="item.is_lq == 1"> </view>
                <image
                  v-if="item.win_type == 1"
                  style="width: 100%; height: 100%; background-color: #522fa9"
                  src="../../static/point.png"
                  mode=""
                ></image>
                <image
                  v-if="item.win_type == 2"
                  style="width: 100%; height: 100%; background-color: #522fa9"
                  src="../../static/coupon.png"
                  mode=""
                ></image>
                <image
                  v-if="item.win_type == 3"
                  style="width: 100%; height: 100%; background-color: #522fa9"
                  :src="item.goods_info.img"
                  mode=""
                ></image>
                <image
                  v-if="item.win_type == 4"
                  style="width: 100%; height: 100%; background-color: #522fa9"
                  src="../../static/diamond.png"
                  mode=""
                ></image>
                <view
                  class="normal-reward-num"
                  v-if="item.win_type == 1 || item.win_type == 4"
                >
                  {{ item.data }}
                </view>
              </view>
            </view>
          </scroll-view>
        </view>
      </view>
    </view>
    <!-- 领取弹出层 -->
    <uni-popup ref="takepopup" type="center">
      <view class="takepopup-content">
        <scroll-view
          scroll-y="true"
          style="height: 400rpx; width: 392rpx; margin-bottom: 50rpx"
        >
          <view
            class="center-reward"
            v-for="item in currentTake"
            :key="'take' + item.id"
          >
            <view class="center-reward-top"> </view>
            <image
              v-if="item.win_type == 1"
              style="width: 100%; height: 100%"
              src="../../static/point.png"
              mode=""
            ></image>
            <image
              v-if="item.win_type == 2"
              style="width: 100%; height: 100%"
              src="../../static/coupon.png"
              mode=""
            ></image>
            <image
              v-if="item.win_type == 3"
              style="width: 60%; height: 60%; background-color: #522fa9"
              :src="item.goods_info.img"
              mode=""
            ></image>
            <image
              v-if="item.win_type == 4"
              style="width: 100%; height: 100%"
              src="../../static/diamond.png"
              mode=""
            ></image>
            <view
              class=""
              style="
                position: absolute;
                bottom: 38rpx;
                right: 33rpx;
                font-size: 49rpx;
              "
              v-if="item.win_type == 4 || item.win_type == 1"
            >
              {{ item.data }}
            </view>
          </view>
        </scroll-view>
        <view class="take-sure" @click="takeAll"> </view>
      </view>
    </uni-popup>
  </view>
</template>

<style lang="scss" scoped>
  .war-content {
    position: relative;
    height: 100vh;
    // background-color: #522fa9;
    color: #fff;

    .content-top {
      position: relative;
      height: 632rpx;
      padding: 88rpx 18rpx 0 18rpx;

      box-sizing: border-box;
      background: url('https://ojqn.wm2177.com/wechat_imgs/war/background.jpg')
        no-repeat;
      background-size: contain;

      .war-top {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;

        .war-back {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 57rpx;
          height: 57rpx;
          background-color: rgba(7, 1, 53, 0.5);
          border-radius: 50%;

          .back-aim {
            width: 20rpx;
            height: 20rpx;
            border-top: 4rpx solid #fff;
            border-left: 4rpx solid #fff;
            transform: rotate(-45deg);
          }
        }
      }
    }

    .war-above {
      .above-top {
        position: relative;

        .name {
          position: relative;
          width: 308rpx;
          height: 62rpx;
          margin-top: 58rpx;
          margin-bottom: 24rpx;
          box-sizing: border-box;
          background: url('https://ojqn.wm2177.com/wechat_imgs/war/title.png')
            no-repeat;
          background-size: contain;
          .batch {
            position: absolute;
            top: -30rpx;
            right: -32rpx;
            height: 32rpx;
            padding: 0 15rpx;
            box-sizing: border-box;
            background: linear-gradient(0deg, #d538ec, #e06df0);
            border-radius: 16rpx;
            font-size: 21rpx;
            text-align: center;
            line-height: 32rpx;
          }
        }

        .above-time {
          display: flex;
          align-items: center;
          font-size: 22rpx;
        }

        .rule {
          width: 57rpx;
          height: 57rpx;
          border-radius: 50%;
          background-color: rgba(7, 1, 53, 0.5);
          position: absolute;
          top: 0;
          right: 0;
          font-size: 22rpx;
          line-height: 57rpx;
          text-align: center;
        }
      }

      .above-bottom {
        position: relative;
        margin-top: 67rpx;
        display: flex;
        align-items: center;

        .above-bottom-bottom {
          position: absolute;
          top: 14rpx;
          left: -18rpx;
          width: 602rpx;
          height: 88rpx;
          background-color: rgba(9, 19, 44, 0.3);
        }

        .level-num {
          display: flex;
          flex-direction: column;
          align-items: center;
          width: 144rpx;
          height: 144rpx;
          background: url('https://ojqn.wm2177.com/wechat_imgs/war/square.png')
            no-repeat;
          background-size: contain;
          z-index: 2;
        }

        .level-bar {
          width: 780rpx;
          height: 88rpx;
          margin-bottom: 18rpx;

          .bottom-bar {
            position: relative;
            width: 346rpx;
            height: 17rpx;
            background-color: #190118;

            .top-bar {
              position: absolute;
              top: 0;
              left: 0;
              height: 100%;
              background: linear-gradient(-90deg, #da5ffe, #efb8de);
            }
          }

          z-index: 2;
        }
      }
    }

    .war-down {
      position: relative;
      top: -90rpx;
      height: 66vh;
      width: 100%;
      background-color: rgba(7, 1, 53, 0.5);

      .war-down-top {
        display: flex;
        align-items: center;
        justify-content: space-between;

        .category {
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          width: 258rpx;
          height: 90rpx;
          background-color: #6f16d3;
          font-size: 36rpx;
        }
        .take-all {
          width: 197rpx;
          height: 56rpx;
          margin-right: 20rpx;
          background: url('https://ojqn.wm2177.com/wechat_imgs/war/take-all.png')
            no-repeat;
          background-size: contain;
        }
      }

      .leve-reward {
        display: flex;
        height: 55rpx;
        font-size: 24rpx;
        text-align: center;
        line-height: 55rpx;

        .level-normal {
          display: flex;
          width: 50%;
          background-color: #453886;
        }

        .special {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 50%;
          background: linear-gradient(0deg, #d538ec, #e06df0);
          .special-lock {
            width: 25rpx;
            height: 33rpx;
            margin-right: 10rpx;
            background: url('https://ojqn.wm2177.com/wechat_imgs/war/lock.png')
              no-repeat;
            background-size: contain;
          }
        }
      }

      .level-reward-item {
        display: flex;
        height: 158rpx;
        // box-sizing: border-box;
        border-bottom: 2rpx solid rgba(255, 255, 255, 0.2);

        .level-reward-normal {
          width: 50%;
          height: 158rpx;
          box-sizing: border-box;
          background-color: #2a2254;
        }

        .level-reward-normal-level {
          display: flex;
          height: 100%;

          .level-reward-normal-level-left {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 50%;
            height: 100%;
            overflow: hidden;

            .level-css {
              position: relative;
              width: 76rpx;
              height: 76rpx;
              background: url('https://ojqn.wm2177.com/wechat_imgs/war/square.png')
                no-repeat;
              background-size: contain;
              font-size: 38rpx;
              text-align: center;
              line-height: 70rpx;
              font-style: initial;

              .bar-top {
                position: absolute;
                left: 50%;
                top: -55%;
                width: 8rpx;
                height: 70%;
                background-color: #5a4f95;
                transform: translateX(-50%);
              }

              .bar-bottom {
                position: absolute;
                left: 50%;
                top: 86%;
                width: 8rpx;
                height: 70%;
                background-color: #5a4f95;
                transform: translateX(-50%);
              }
            }
          }

          .level-reward-normal-level-right {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 50%;
            height: 100%;

            .normal-reward-img {
              position: relative;
              width: 106rpx;
              height: 106rpx;
              .cant {
                position: absolute;
                top: 0;
                bottom: 0;
                z-index: 2;
                width: 100%;
                height: 100%;
              }
              .normal-reward-num {
                position: absolute;
                bottom: 0;
                left: 0;
                width: 100%;
                height: 24rpx;
                background-color: #b2a5f5;
                color: black;
                line-height: 24rpx;
                text-align: center;
                font-weight: 700;
                font-style: italic;
                font-size: 20rpx;
              }
            }
          }
        }

        .level-reward-special {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 50%;
          height: 158rpx;
          background-color: #421f94;

          .normal-reward-img-item {
            position: relative;
            width: 106rpx;
            height: 106rpx;
            flex-shrink: 0;
            // background-color: pink;
            margin-right: 28rpx;

            &:last-child {
              margin-right: 0;
            }

            .normal-lock {
              position: absolute;
              top: 0;
              right: 0;
              width: 25rpx;
              height: 33rpx;
              background: url('https://ojqn.wm2177.com/wechat_imgs/war/lock.png')
                no-repeat;
              background-size: contain;
            }

            .normal-reward-num {
              position: absolute;
              bottom: 0;
              left: 0;
              width: 100%;
              height: 24rpx;
              background-color: #b2a5f5;
              color: black;
              line-height: 24rpx;
              text-align: center;
              font-weight: 700;
              font-style: italic;
              font-size: 20rpx;
            }
          }
        }
      }
    }

    .bottom-level {
      position: absolute;
      bottom: 0;
      left: 0;
      height: 170rpx;
      width: 100%;

      .level-reward-item {
        display: flex;
        height: 170rpx;
        box-sizing: border-box;

        .level-reward-normal {
          width: 50%;
          height: 158rpx;
          box-sizing: border-box;
          background-color: #453886;
        }

        .level-reward-normal-level {
          display: flex;
          height: 100%;

          .level-reward-normal-level-left {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 50%;
            height: 100%;
            overflow: hidden;

            .level-css {
              position: relative;
              width: 76rpx;
              height: 76rpx;
              background: url('https://ojqn.wm2177.com/wechat_imgs/war/square.png')
                no-repeat;
              background-size: contain;
              font-size: 38rpx;
              text-align: center;
              line-height: 70rpx;
              font-style: initial;
            }
          }

          .level-reward-normal-level-right {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 50%;
            height: 100%;

            .normal-reward-img {
              position: relative;
              width: 106rpx;
              height: 106rpx;
              // background-color: pink;

              .cant {
                position: absolute;
                top: 0;
                bottom: 0;
                z-index: 2;
                width: 100%;
                height: 100%;
              }

              .normal-reward-num {
                position: absolute;
                bottom: 0;
                left: 0;
                width: 100%;
                height: 24rpx;
                background-color: #b2a5f5;
                color: black;
                line-height: 24rpx;
                text-align: center;
                font-weight: 700;
                font-style: italic;
                font-size: 20rpx;
              }
            }
          }
        }

        .level-reward-special {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 50%;
          height: 158rpx;
          background-color: #db55ee;

          .normal-reward-img-item {
            position: relative;
            width: 106rpx;
            height: 106rpx;
            flex-shrink: 0;
            // background-color: pink;
            margin-right: 28rpx;

            &:last-child {
              margin-right: 0;
            }
            .normal-lock {
              position: absolute;
              top: 0;
              right: 0;
              width: 25rpx;
              height: 33rpx;
              background: url('https://ojqn.wm2177.com/wechat_imgs/war/lock.png')
                no-repeat;
              background-size: contain;
            }
            .normal-reward-num {
              position: absolute;
              bottom: 0;
              left: 0;
              width: 100%;
              height: 24rpx;
              background-color: #b2a5f5;
              color: black;
              line-height: 24rpx;
              text-align: center;
              font-weight: 700;
              font-style: italic;
              font-size: 20rpx;
            }
          }
        }
      }
    }

    .can-out {
      position: absolute;
      top: 0;
      bottom: 0;
      z-index: 2;
      width: 100%;
      height: 100%;
      box-sizing: border-box;
      box-shadow: 0rpx 0rpx 28rpx 0rpx #da5ffe;
    }
    .can-in {
      position: absolute;
      top: 0;
      bottom: 0;
      z-index: 2;
      width: 100%;
      height: 100%;
      box-sizing: border-box;
      box-shadow: inset 0rpx 0rpx 28rpx 0rpx #da5ffe;
      border: 4rpx solid #da5ffe;
      border-radius: 4rpx;
    }

    .allready-take {
      position: absolute;
      top: 0;
      left: 0;
      z-index: 2;
      width: 100%;
      height: 100%;
      background: url('https://ojqn.wm2177.com/wechat_imgs/war/check.png')
        no-repeat;
      background-size: contain;
    }
    .takepopup-content {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      width: 750rpx;
      height: 784rpx;
      background: url('https://ojqn.wm2177.com/wechat_imgs/war/take-bg.png')
        no-repeat;
      background-size: contain;
      .center-reward {
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        width: 392rpx;
        height: 400rpx;
        margin-bottom: 50rpx;
        box-sizing: border-box;
        background: url('https://ojqn.wm2177.com/wechat_imgs/war/pop-center.png')
          no-repeat;
        background-size: contain;
        .center-reward-top {
          position: absolute;
          top: 0;
          bottom: 0;
          width: 100%;
          height: 100%;
          background: url('https://ojqn.wm2177.com/wechat_imgs/war/pop-center.png')
            no-repeat;
          background-size: contain;
        }
      }
      .take-sure {
        width: 244rpx;
        height: 83rpx;
        background: url('https://ojqn.wm2177.com/wechat_imgs/war/sure.png')
          no-repeat;
        background-size: contain;
      }
    }
  }
  ::v-deep .uni-countdown__number {
    width: 30rpx !important;
    height: 28rpx !important;
    margin: 0 !important;
    line-height: 28rpx !important;
    font-size: 22rpx;
  }
  ::v-deep .uni-countdown__splitor {
    line-height: 28rpx !important;
    // padding: 0 4rpx !important;
    font-size: 22rpx;
    color: #fff !important;
  }
</style>
